<template>
    <layoutHeader></layoutHeader>

    <p class="title_small">网上投诉</p>
	<funcsBack></funcsBack>

	<el-form  label-width="auto" id="advice-form" :rules="rules">
    
        <el-form-item label="姓名" prop="name">
          <el-input v-model="petitionModel.username" placeholder="请输入姓名"></el-input>
	    </el-form-item>
		<!-- 证件类型和身份证号 -->
		<el-form-item label="证件类型" prop="authType">
        <!-- 证件类型 select 组件 -->
		       
        </el-form-item>
		<el-form-item label="身份证号" prop="authId">
        <el-input v-model="petitionModel.authID" placeholder="请输入证件号码"></el-input>
        </el-form-item>
		<!-- 是否公开 -->
		<el-form-item label="是否公开" prop="isPublic">
        <el-radio-group v-model="petitionModel.isPublic">
        <el-radio :label="1">公开</el-radio>
        <el-radio :label="0">不公开</el-radio>
        </el-radio-group>
        </el-form-item>
		<!-- 呈递单位 -->
		<el-form-item label="呈递单位" prop="institution">
        <el-select v-model="petitionModel.institution" placeholder="请选择上访单位">
        <!-- select 选项 -->
		<el-option
        v-for="item in institutions"
        :key="item"
        :label="item"
        :value="item"
        />
        </el-select>
        </el-form-item>
		<el-form-item label="关键词" prop="keywords" >
			<el-select v-model="petitionModel.keywords" placeholder="请选择关键字">
        <!-- select 选项 -->
		<el-option
        v-for="item in keyWords"
        :key="item"
        :label="item"
        :value="item"
        />
        </el-select>
        </el-form-item>
		<el-form-item label="标题" prop="authId">
        <el-input v-model="petitionModel.title" placeholder="请输入标题"></el-input>
        </el-form-item>
		<el-form-item label="投诉内容" prop="description" >
			<el-input
              v-model="petitionModel.description"
              :rows="4"
              type="textarea"
              placeholder="请输入"
            />
        <div class="word"><span class="text_count">{{ petitionModel.description.length }}</span> / <span class="num_count" id="numCount">1000</span></div>
        </el-form-item>
		  <!-- 相关附件 -->
		  <el-form-item label="相关附件" >
      
	    <div class="fujian">
		  <p style="color:#747474;margin:8px">请点击添加附件按钮,将与信访（建议）事项相关的电子文档在此上传。</p>
			  <div id="fujian" ></div>
	    </div>
        </el-form-item>
					  <!-- <textarea placeholder="请上传文件" class="layui-textarea" lay-verify="required" lay-filter="fujian" name="fujian" id="fujian"></textarea> -->
        <el-form-item  id="upload2">		
			<upload :file-list="fileList" @updateFilename="handleFileName"></upload>
        </el-form-item>
        <!-- 建议人手机号码 -->
        <el-form-item label="投诉人手机号码"  >
	      <el-input v-model="captchaModel.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!-- 短信验证码 -->
        
		<el-form-item label="短信验证码"  >
        <div style="display: flex; align-items: center;">
        <el-input 
        v-model="captchaModel.captcha" 
        placeholder="短信验证码" 
        style="flex-grow: 1;"
        ></el-input>
        <el-button 
        type="button" 
        @click="getCaptcha" 
        id="cap2" 
        style="margin-left: 10px;"
        >发送短信</el-button>
         </div>
        </el-form-item>
        <!-- 提交和重置按钮 -->
        <el-form-item class="buttonbox">
	      <el-button type="primary" @click="click1" class="msg-send-btn">提交</el-button>
	      <el-button @click="click2" class="msg-send-btn">重置</el-button>
        </el-form-item>
    </el-form>


						
	<layoutFooter></layoutFooter>
</template>
    
<script setup>
import layoutHeader from '@/components/layoutHeader.vue'
import layoutFooter from '@/components/layoutFooter.vue'
import funcsBack from '@/components/funcsBack.vue'
import upload from '@/components/upload.vue'
import {ref} from 'vue'
import { postOnePetitionService } from '@/api/func.js'
import { getInfoService, sendService } from '@/api/user.js'
import { ElMessage } from 'element-plus'
import { reactive, watch } from 'vue'
import { usePhoneStore } from '@/stores/phone'

const phoneStore = usePhoneStore();

//获取验证码

//数据模型
const captchaModel = ref({
	phone:'',
	captcha:''
})


//上访机构
const institutions = ref([
	'单位1',
	'单位2',
	'单位3'
])

const keyWords = ref([
'农村农业',
'国土资源',
'城乡建设',
'劳动和社会保障',
'卫生计生',
'教育文体',
'民政',
'政法',
'经济管理',
'交通运输',
'商贸旅游',
'科技与信息产业',
'环境保护',
'党务政务',
'组织人事',
'纪检监察',
'其他'
])

//表单校验规则
const rules = ref({
  authID:[{
    required:true,message:'身份证不能为空',trigger:'change'
    },
    {
      min:18,max:18,message:'长度不正确',trigger:'change'
    }
  ],
  username:[{
    required:true,message:'姓名不能为空',trigger:'blur'
  }],
//   phone:[{
//     required:true,
//       message:'手机号不能为空',
//       trigger:'blur'
//     },
//     {
//       min:11,max:11,message:'手机号不正确',trigger:'change'
//     }],
//   captcha:[{
//     required:true,
//       message:'验证码不能为空',
//       trigger:'change'
//     }]
})




//文件图片上传
const fileList = ref([

]); // 用于存储从子组件接收的 filename

const handleFileName = (filename) => {
  console.log('Received filename:', filename);
  console.log('当前上传'+filename);
  fileList.value.push(filename); // 将新的文件名添加到数组中
};

//建议模型
const petitionModel = ref({
	authID: '',
   
    description: '',
   
    institution: '',
   
    isPublic: false,
 
    keywords: '',
  
    title:'',

    userid: 0,
  
    username:'',
})


const clearPetitionModel=()=>{
	petitionModel.value = {
	authID: '',
    description: '',
    institution: '',
    isPublic: false,
    keywords: '',
    title:'',
    userid: 0,
    username:'',
	}
}

const clearCaptchaModel=()=>{
	captchaModel.value={
		phone:'',
		captcha:''
	}
}


//用户调用接口完成网上信访，差验证码校验部分，以及文件url处理（待商议
const postPetition = async() => {
	console.log('wjian'+fileList.value);
	console.log(petitionModel.value);
  //将所有文件url添加在description后
  petitionModel.value.description+="用户上传相关附件";
  for(let i = 0;i<fileList.value.length;i++){
    petitionModel.value.description+=fileList.value[i];
  };
  console.log(petitionModel.value);
	let userInfo = await getInfoService(phoneStore.phone);
	petitionModel.value.userid = userInfo.data.user;
	let result = await postOnePetitionService(petitionModel.value);
	clearPetitionModel();
	clearCaptchaModel();
	console.log(result.data);
	
}




const click2=()=>{
	ElMessageBox.confirm(
    '确定重置?',
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
	clearCaptchaModel();
	clearPetitionModel();
      ElMessage({
        type: 'success',
        message: '重置成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}

//
const click1 = () => {
  ElMessageBox.confirm(
    '确定提交?',
    '',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
	postPetition();
	clearCaptchaModel();
	clearPetitionModel();
      ElMessage({
        type: 'success',
        message: '提交成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}






//接口待完善
const getCaptcha = async()=>{
  //let result = sendService(captchaModel.value.phone);
  ElMessage.success("验证码已发送")

}



</script>
    
<style lang="scss" scoped>
/* 基本重置 */
body, h1, h2, h3, h4, h5, h6, p, form {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保padding和border不会增加元素的总宽度 */
}

/* 表单容器样式 */
#advice-form {
    font-family: 'Arial', sans-serif;
    max-width: 100%;
    margin: 1% auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    width: 80%; /* 使用百分比设置宽度 */
}

/* 表单项样式 */
.layui-form-item {
    margin-bottom: 1em; /* 为表单项设置底部外边距 */
    display: flex; /* 使用flex布局使元素在同一行 */
    align-items: center; /* 垂直居中对齐 */
}

/* 标签和星号样式 */
.layui-form-label {
    width: 20%; /* 使用百分比设置宽度 */
    padding-right: 1em; /* 为标签和输入框之间添加间距 */
    text-align: right; /* 标签右对齐 */
}

.bitian-xing {
    color: red;
}

/* 输入框和下拉选择框样式 */
.layui-input-inline, .layui-input-block {
    flex-grow: 1; /* 让输入框占据剩余空间 */
    margin-left: 1em; /* 为输入框设置左边距 */
}

.layui-input, .layui-textarea, .layui-select {
    padding: 0.5em; /* 设置内边距 */
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* 宽度为100% */
}

/* 单选按钮样式 */
.layui-input-block input[type="radio"] {
    margin-right: 0.5em; /* 为单选按钮设置右边距 */
}

/* 发送验证码按钮和验证码输入框在同一行 */
 .msg-send-btn {
    display: inline-block; /* 使按钮内联显示 */
    margin-left: 1em; /* 为发送验证码按钮设置左边距 */
    padding: 0.5em 1em; /* 设置按钮内边距 */
    background-color: #009688;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* 按钮容器样式 */
.layui-form-item.center {
    display: flex;            /* 使用Flexbox布局 */
    justify-content: center;  /* 水平居中对齐 */
    align-items: center;      /* 垂直居中对齐 */
}

/* 提交和重置按钮样式 */
.layui-btn {
    padding: 0.5em 1em;      /* 设置按钮内边距 */
    margin: 0 0.5em;         /* 设置按钮之间的外边距 */
    border: none;            /* 移除边框 */
    border-radius: 4px;       /* 设置圆角 */
    cursor: pointer;         /* 鼠标悬停时显示为指针 */
    transition: background-color 0.3s; /* 背景颜色变化的过渡效果 */
}

.submit-btn {
    background-color: #5FB878; /* 提交按钮的背景颜色 */
    color: white;              /* 文字颜色 */
}

.submit-btn:hover {
    background-color: #4ca866; /* 提交按钮悬浮时的背景颜色 */
}

.cancel-btn {
    background-color: #999;    /* 重置按钮的背景颜色 */
    color: white;              /* 文字颜色 */
}

.cancel-btn:hover {
    background-color: #888;    /* 重置按钮悬浮时的背景颜色 */
}

/* 字数统计样式 */
.word {
    margin-top: 0.5em;
    font-size: 0.9em;
    color: #666;
}

/* 代理信息样式 */
.sfdlData {
    display: none; /* 默认隐藏 */
    padding: 1em;
    border-top: 1px solid #eee;
}
.title_small{
    margin-top:12%;
    margin-left:10%;
    color: #666;
    font-size: 25px;
    font-weight: 700;

}

#upload2{
    display: flex;            /* 使用Flexbox布局 */
    justify-content: center;  /* 水平居中对齐 */
    align-items: center;
}

.breadcrumb{
	float: left;
	position: absolute;
	top:18%;
	left:80%;
	color: rgb(76, 159, 237);
	cursor: default !important;
}

.breadcrumbtext{
	
	color: rgb(76, 159, 237);
	cursor: default !important;
	font-size: 20px;
	font-weight: 600;
}

.buttonbox{
	margin-left:41%;
	width:18%;
}
#cap1{
	width:40%;
}
#cap2{
	width:25%;
	background-color: #009688;
	color: white;
}
#cap{
	display: flex;
	flex-direction: row;
}

</style>